<template>
    <h2>列表</h2>
    门店名称：
    <input type="text" v-model="name"/>
    商户地址：
    <select v-model="zaddress">
                    <option value="北京昌平区">北京昌平区</option>
                    <option value="北京顺义区">北京顺义区</option>
                    <option value="北京房山">北京房山</option>
                </select>
    <input type="button" value="查询" @click="Show"/>
    <table border="1" class="table table-info">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" v-model="All" @change="Quanxuan"/>
                </td>
                <td>门店名称</td>
                <td>分店名称</td>
                <td>商户地址</td>
                <td>门店照片</td>
                <td>客服电话</td>
                <td>门店状态</td>
                <td>开业日期</td>
                <td>门店介绍</td>
                <td>入住须知</td>
                <td>交通信息</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info.shop_Info">
                <td><input  type="checkbox" :checked="isxuan" v-model="Cunzhi" @change="FanXuan"/></td>
                <td>{{item.sName}}</td>
                <td>{{item.fName}}</td>
                <td>{{item.address}}</td>
                <td><img :src="item.imgUrl" alt="" width="100" height="100"/></td>
                <td>{{item.phone}}</td>
                <td>{{item.state==true?"启用":"禁用"}}</td>
                <td>{{item.time}}</td>
                <td>{{item.shopInfo}}</td>
                <td>{{item.shopXZ}}</td>
                <td>{{item.traffic}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.sId)"/>
                    <input type="button" value="修改" @click="Xiu(item.sId)"/>
                </td> 
            </tr>
        </tbody>
    </table>

    总共有{{info.pageCount}}页
    总共有{{info.totalCount}}条数据
    当前第{{pageInfo.pageIndex}}/{{pageInfo.pageCount}}页

    <a href="#" @click="Fan('F')">首页</a>
    <a href="#" @click="Fan('L')">上一页</a>
    <a href="#" @click="Fan('N')">下一页</a>
    <a href="#" @click="Fan('E')">尾页</a>

    <select v-model="Yema" @change="Ye" >
        <option :value="1">1条/页</option>
        <option :value="2">2条/页</option>
        <option :value="3">3条/页</option>
    </select>

    <input type="text" v-model="Tiao"/>
    <input type="button" value="跳转" @click="Tiaozhuan"/>

</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRouter,useRoute} from 'vue-router';

    const router=useRouter();
    const route=useRoute();

    const name=ref("");
    const zaddress=ref("");

    const pageInfo=ref({
        pageSize:2,
        pageIndex:1,
        //totalCount:0,
        //pageCount:0
    });

    const info=ref({
        totalCount:0,
        pageCount:0,
        shop_Info:[{
            sId:0,
            sName: "",
            fName: "",
            address: "",
            imgUrl: "",
            phone: "",
            state: true,
            shopInfo: "",
            time: "",
            shopXZ: "",
            traffic: ""
        }]
    })

    // const info=ref({
    //         sId:0,
    //         sName: "",
    //         fName: "",
    //         address: "",
    //         imgUrl: "",
    //         phone: "",
    //         state: true,
    //         shopInfo: "",
    //         time: "",
    //         shopXZ: "",
    //         traffic: ""
    // })


    onMounted(()=>{
        Show();
    });

    //显示
    const Show=()=>{
        axios.get("https://localhost:7168/api/Shop/GetShopByPage/GetShopByPage",{
            params:{
                pageSize:pageInfo.value.pageSize,
                pageIndex:pageInfo.value.pageIndex,
                name:name.value,
                address:zaddress.value
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data;
            //info.value=res.data.shop_Info;
            //console.log(info.value);
            
            // pageInfo.value.pageCount=res.data.pageCount;
            // pageInfo.value.totalCount=res.data.totalCount;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    //删除
    const Shan=(id:number)=>{
        if(confirm("确定要删除吗？")){
        axios.get("https://localhost:7168/api/Shop/DelShop/DelShop",{
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show();
            }
            else{
                alert('删除失败');
            }
        })
        }
    }

    //修改 跳转
    const Xiu=(id:number)=>{
        router.push({
            name: 'ShopUpdate',
            params:{
                id:id
            }
        })
    }

    const Fan=(choose:any)=>{

        switch(choose){

            case 'F':
            pageInfo.value.pageIndex=1;
            break;
            case 'L':
            pageInfo.value.pageIndex--;
            break;
            case 'N':
            pageInfo.value.pageIndex++;
            break;
            case 'E':
            pageInfo.value.pageIndex=pageInfo.value.pageCount;
            break;
        }
        Show();
    }

    const Yema=ref(0);
    const Ye=()=>{
        pageInfo.value.pageSize=Yema.value;
        Show();
    }

    const Tiao=ref(0);
    const Tiaozhuan=()=>{
        pageInfo.value.pageIndex=Tiao.value;
        Show();
    }

    const All=ref(false);
    const isxuan=ref(false);
    const Cunzhi=ref([]);
    const Quanxuan=()=>{
        if(All.value==true){
            isxuan.value=true;
            Cunzhi.value=info.value.map((i:any)=>{
                return i.sId;
            })
        }
        else{
            isxuan.value=false;
            Cunzhi.value=[];
        }
    }

    const FanXuan=()=>{
        if(Cunzhi.value.length==info.value.length){
            All.value=true;
        }
        else{
            All.value=false;
        }
    }


</script>
